<!--
 * @Author: your name
 * @Date: 2021-08-21 09:19:47
 * @LastEditTime: 2021-08-21 10:15:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \系统学习\VueProject\vue02\supermall\src\components\common\toast\Toast.vue
-->
<template>
    <div class="toast" v-show="isShow">
        <div>{{message}}</div>
    </div>
</template>

<script>
export default {
    name:'Toast',
    // props:{
    //     message:{
    //         type:String,
    //         default:''
    //     },
    //     show:{
    //         type:Boolean,
    //         default:false
    //     }
    // },
    data(){
        return {
            message:'',
            isShow:false
        }
    },
    methods:{
        show(message,duration=2000) {
            this.isShow = true
            this.message = message
            setTimeout(() => {
                this.isShow = false
                this.message = ''
            }, duration);
        }
    }
}
</script>

<style scoped>
    .toast{
        position: fixed;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 999;
        padding:8px 10px;
        color:#fff;
        background-color:rgba(0,0,0,.75);
    }
</style>
